<template>

    <mi-list-page>

        <el-tabs model-value="user" @tab-change="tabChange">
            <el-tab-pane label="通知会员" name="user"></el-tab-pane>
            <el-tab-pane label="通知平台" name="admin"></el-tab-pane>
        </el-tabs>

        <mi-table :list="list" max-height="calc(100vh - 210px - 54px)">

            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary" @click="lineToolbarEvent('edit', row)" v-auth="auth.edit">编辑</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>

    <notice-tpl-edit />

</template>


<script setup lang="ts">

import {computed, getCurrentInstance, provide, reactive, ref, watch} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";
import NoticeTplEdit from "@/views/notice/noticeTplEdit.vue";

const auth = makeModelAuth('noticeTpl')

const { proxy } : any = getCurrentInstance()

const tdWidth = global.tdWidth

const lineToolbarEvent = (event:string, row:any) => {
    switch (event) {
        case 'edit':
            list.currentRow = row
            edit.show = true
            edit.info = row
            break
    }
}

const tabChange = (name:string) => {
    const where : Record<string, any> = {}    // 重置查询条件
    // 添加查询条件
    switch (name) {
        case 'user':
            where.notice_type = 1
            break
        case 'admin':
            where.notice_type = 2
            break
    }
    list.where = where
    list.reload(1)
}


const list = reactive(new List({
    where: {notice_type:1},
    url: `/${auth.index}`,
    columns:[
        {name: "check", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "title", title: "标题", minWidth: tdWidth.title},
        {name: "sms_status", title: "发送短信", type:"showStatus", align: "center"},
        {title: "操作", type:'slot', slot:'toolbar', fixed:'right'},
    ]
}))

const edit = reactive(new Edit({}))

provide("list", list)
provide("edit", edit)

</script>

<style scoped>

</style>
